<template>
	<view style="padding-top: 40px;">
		
		<view style="width: 80%; margin: 0 auto;">
			<mushan-point ref="mushanRef" :imgUrl="'/static/logo.png'" @getPoint="getPoint"></mushan-point>
		</view>

		<view>
			<view>距离图片头部距离：{{logdata.topN}} px</view>
			<view>距离图片左边距离：{{logdata.leftN}} px</view>
			<view>矩形框宽：{{logdata.widthMd}} px</view>
			<view>矩形框高：{{logdata.heightMd}} px</view>
		</view>
		
		<button @click="mushanRef.onlogClear()">重置</button>

	</view>
</template>

<script setup>
	import {
		onShow,
		onReady,
		onReachBottom,
		onPullDownRefresh,
		onShareAppMessage
	}
	from '@dcloudio/uni-app';
	import {
		getCurrentInstance,
		ref,
		reactive,
		inject,
		computed,
		defineProps,
		watch,
		nextTick,
		onMounted,
		provide
	} from 'vue';


	let mushanRef = ref(null);
	let logdata = reactive({})
	function getPoint(e){
		logdata.leftN = e.leftN  
		logdata.topN = e.topN
		logdata.widthMd = e.widthMd
		logdata.heightMd = e.heightMd
	}

	
</script>

<style scoped lang="scss">
	.logoBox {
		width: 85%;
		margin: 0 auto;
		position: relative;
		.logo {
			width: 100%;
			height: auto;
		}
		.maodian{
			border: 1px solid red;
			position:absolute;
			left: 0;
			top: 0;
		}
	}
</style>